<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'Login.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet"
	href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet"
	href="static/bootstrap-3.3.7-dist/css/bootstrap-datetimepicker.min.css" />
<script type="text/javascript"
	src="static/bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
	src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="static/jquery-1.12.4.js"></script>
	<!-- **********************在外部文件下写入样式*************************************** -->
	<link rel="stylesheet" type="text/css" href="css/bigprogrammercss.css">
	<link rel="stylesheet" type="text/css"
	href="css/font-awesome-4.7.0/css/font-awesome.min.css" />
	<link
	href="static/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" media="screen">
	<script type="text/javascript"
	src="static/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"
	charset="UTF-8"></script>
<script type="text/javascript"
	src="static/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.fr.js"
	charset="UTF-8"></script>
	<script type="text/javascript">
	$(function() {
		$(".form_datetime").datetimepicker({
			format : "yyyy-mm-dd  HH:mm:ss",
			autoclose : true,
			todayBtn : true,
			pickerPosition : "bottom-left"
		});
	});


	var InterValObj; //timer变量，控制时间
	var count = 30; //间隔函数，1秒执行
	var curCount;//当前剩余秒数
	function sendMessage() {
		curCount = count;
		$("#btn").attr("disabled", "true");/* disabled 属性规定应该禁用 input 元素 .attr返回被选元素的属性值。*/
		$("#btn").val(curCount + "秒后可重新发送"); /* val() 方法返回或设置被选元素的值 */
		InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次请求后台发送验证码 TODO
	}
	//timer处理函数
	function SetRemainTime() {
		if (curCount == 0) {
			window.clearInterval(InterValObj);//停止计时器
			$("#btn").removeAttr("disabled");//启用按钮
			$("#btn").val("重新发送验证码");
		} else {
			curCount--;
			$("#btn").val(curCount + "秒后可重新发送");
		}
	} 
</script>
<style type="text/css">
#login {
	width: 650px;
	height: 1000px;
	margin: 50px auto;
}

#btn {
	margin-left: 150px;
	margin-top: -35px;
	width: 120px;
	height: 35px;
	font-size: 11px;
}
		.inputstyle{width: 100px; background-color: gainsboro; border: 1px ; border-color: white;}

/* body{ background-color: #ecfcf9;}  */
</style>
<body>
<div id="lx0">
		<div id="lx1">
			<div id="lx1-11">
				<font color="white" size="6" face="agency fb">勤学网</font></br>
				<font color="white">qinxue&nbsp;&nbsp;.&nbsp;&nbsp;com</font>
			</div>
			<div id="lx1-12">
				<ul>
					<li><a href="#">首页</a></li>
					<li>
						<div class="dropdownlx">
							<button class="dropbtnlx">课程设置</button>
							<div class="drop-contentlx">
								<a href="#">< 平面设计</br></a><a href="#">< 影视设计</br></a> <a href="#"><
									机械设计 </br>
								</a><a href="#">< 园林景观设计</br></a> <a href="#">< 影视后期制作</br></a>
							</div>

						</div>
					</li>
					<li><a href="#">老师加盟</a></li>
					<li><a href="#">学员感言</a></li>
					<li>name</li>
					 <li>
					 	 	<div style="background-color: gainsboro; width: 130px;" >
					 	 	<input type="text" class="inputstyle" placeholder="搜索课程"  >
					 	 	<span class="glyphicon glyphicon-search"></span>
					 	 		</div>
					 	 </li>
					<li><a href="#">学习记录</a></li>

				</ul>
			</div>
		</div>
	<div id="lx2">
		<div class="container">
			<div id="login">
			<form class="form-horizontal" action="LoginAction" method="post"  enctype="multipart/form-data"  role="form"> 
				<font id="font2" size="6">新用户注册</font>
				<hr style="border: 1px solid #B7B9B4" />

				<font size="4">
					<div class="form-group" style="padding-top: 10px;">
						<label class="col-sm-2 control-label ">邮 箱:</label>
						<div class="col-sm-5">
							<input type="email" class="form-control" id="txtUseremail"
								name="host_eml" placeholder="请输入邮箱" style="height: 40px;">
						</div>
					</div>
					<div class="form-group" style="padding-top: 5px;">
						<label class="col-sm-2 control-label ">用户名:</label>
						<div class="col-sm-5">
							<input type="text" class="form-control" id="txtUserName"
								name="host_name" placeholder="请输入用户名" style="height: 40px;">
						</div>
					</div>
					<div class="form-group" style="padding-top: 5px;">
						<label class="col-sm-2  control-label ">密 码:</label>
						<div class="col-sm-5">
							<input type="password" class="form-control" id="txtUserpwd"
								name="host_psw" placeholder="请输入密码" style="height: 40px;">
						</div>
					</div>
					<div class="form-group" style="padding-top: 5px;">
						<label class="col-sm-2  control-label "> 确认密码:</label>
						<div class="col-sm-5">
							<input type="password" class="form-control" id="txtUserpwd1"
								name="host_psw1" placeholder="请确认密码" style="height: 40px;">
						</div>
					</div>

					<div class="form-group" style="padding-top: 5px; hight:40px;">
						<label class="col-sm-2  control-label "> 性别:</label>
						<div class="col-sm-5" style="; hight:40px;">
					
							<input type="radio"  id="txtUsertsex"
								name="host_sex"value="女" style="height: 20px; width:20px">女
						
							
					<input type="radio"  id="txtUsertsex"
								name="host_sex"value="男" style="height: 20px;width:20px;margin-left:15px;">男
								
						</div>
					</div>
					
					<div class="form-group" style="padding-top: 5px;">
						<label class="col-sm-2  control-label "> 注册时间:</label>
						<div class="col-sm-5">
							<input type="date" class="form-control" id="txtUserdate"
								name="host_time" placeholder="请确选择日期" style="height: 40px;">
						</div>
					</div>
					<div class="form-group" style="padding-top: 5px;">
						<label class="col-sm-2 control-label">头像</label>
						<div class="col-sm-5">
							<input type="file" class="form-control" id="txtUserimg"
								name="host_img">
						</div>
					</div>
			
							<div class="form-group" style="padding-top: 5px;">
								<label class="col-sm-2 control-label">手机号</label>
								<div class="col-sm-5">
									<input type="text" class="form-control" id="phone" name="host_tel"
										placeholder="请输入您的手机号" required autofocus>
									<!--当设置该属性后，它规定在页面加载后文本区域自动获得焦点  -->
								</div>
							</div>
						<div class="form-group" style="padding-top: 5px;">
								<label class="col-sm-2 control-label">验证码</label>
								<div class="col-sm-3">
									<input type="code" class="form-control" id="code" name="code" placeholder="验证码" required>
										 <input class="btn btn-default" id="btn" name="btn" value="发送验证码" onclick="sendMessage()" />
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-2 col-sm-10">
									<button type="submit" class="btn btn-default" id="lo">注册</button>
								</div>
							</div>
						</form>
					</div>
				</div>
		</div>
</body>
<script type="text/javascript">
    $("#txtUserdate").click(function(){
    	 var psw = $("#txtUserpwd").val();
		 var psw1 = $("#txtUserpwd1").val();
		 if( psw!=psw1){
			 alert("两次输入的密码不一致！！！");
		 }
		 else{
			; 
		 };
		 
    });
	var sms = "";
	$("#btn").click(function() {
		
		var phone = $("#phone").val();
		if (phone != "") {
			$.ajax({
				url : "sendSMS",
				type : "post",
				data : {
					"phone" : phone
				},
				success : function(result) {
					sms = result;
				}
			});
		} else {
			alert("请输入手机号");
			return false;
		}
		
	});
	 $("#lo").click(function() {
		var code = $("#code").val();
		if (code == "") {
			     alert("请输入验证码");
		         } 
		else {
			       if (sms == code) {
				       window.location.href = "login_mmd.jsp";
			        } else {
				alert("验证码错误");
				};
		};
	
	}); 
</script>
</html>
